import styles from './index.less';
import imgs from '../../icon/imgs';
import React from 'react';
import { ImagePicker, InputItem, Button } from 'antd-mobile';
import { history } from 'umi';

export default class ImagePickerExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '',
      userNamePlaceholder: '请输入您用户名',
      shareText: '',
      shareTextPlaceholder: '请输入分享文案',
      isShowShareText: false,
      isUploading: true,
      time1:'',
      time2:'',
      isShowTime1:false,
      isShowTime2:false,
      likeCount:100
    };
  }
  componentWillMount() {
    this.setState({
      multiple: false,
      files: [],
      files2: [],
      arr: this.markRandom(this.state.likeCount, 470),
    });
  }

  onChange = (files, type, index) => {
    this.setState({ files });
  };
  onChange2 = (files2, type, index) => {
    this.setState({ files2 });
  };

  markRandom = (total, max) => {
    let genArr = [];
    while (genArr.length < total) {
      if (genArr.length == 0) {
        let genNum = Math.floor(Math.random() * 1000 + 1);
        if (genNum < max) {
          genArr.push(genNum);
        }
      } else {
        let genStr = genArr.join(',');
        let genNum = Math.floor(Math.random() * 1000 + 1);
        if (genNum < max) {
          if (genStr.indexOf(genNum.toString()) == -1) {
            genArr.push(genNum);
          }
        }
      }
    }
    console.log(genArr);
    return genArr;
  };

  render() {
    return (
      <div>
        <div className={styles.title}>
          <div>
            {this.state.isShowTime1 ? <span style={{ paddingRight: 2 }}>{this.state.time1}</span>:  <InputItem onChange={(time1) => {this.setState({ time1 });}} value={this.state.time1} id='time1' placeholder={'请输入时间'}/>}
            <img style={{ paddingBottom: 2 }} src={imgs.icon11} alt="" className={styles.titleImg}/>
          </div>
          <div>
            <img src={imgs.icon10} alt="" className={styles.titleImg} />
            <img src={imgs.icon1} alt="" className={styles.titleImg} />
            <img src={imgs.icon2} alt="" className={styles.titleImg} />
            <img src={imgs.icon5} alt="" className={styles.titleImg} />
          </div>
        </div>

        <div className={styles.title2}>
          <img src={imgs.icon9} alt="" className={styles.titleImg2} onClick={() => {history.push({ pathname: '/' });}}/>
          <span>详情</span>
          <div className={styles.title3}>
            <div className={styles.dot} />
            <div className={styles.dot} />
            <div className={styles.dot} />
          </div>
        </div>

        <div className={styles.content}>
          {/*上半部分*/}
          <div style={{ display: 'flex' }}>
            <div className={styles.contentLeft}>
              <ImagePicker
                files={this.state.files}
                onChange={this.onChange}
                onImageClick={(index, fs) => console.log(index, fs)}
                selectable={this.state.files.length < 1}
                multiple={this.state.multiple}
              />
            </div>
            <div className={styles.contentRight}>
              <div className={styles.name}>
                <InputItem onChange={(userName) => {this.setState({ userName });}} placeholder={this.state.userNamePlaceholder} value={this.state.userName}/>
              </div>

              {this.state.isShowShareText ? <span className={styles.name21}>{this.state.shareText}</span> :
                <span className={styles.name2}>
                  <InputItem onChange={(shareText) => {this.setState({ shareText });}}  placeholder={this.state.shareTextPlaceholder} value={this.state.shareText}/>
                </span>
              }

              {this.state.isUploading && (
                <div className={styles.sw_name3}>
                  <ImagePicker files={this.state.files2} onChange={this.onChange2}  selectable={this.state.files2.length < 9} multiple={this.state.multiple}/>
                </div>
              )}

              {!this.state.isUploading && this.state.files2.length === 1 && (
                <div>
                  <img src={this.state.files2[0].url} alt="" className={styles.shw_item1}/>
                </div>
              )}

              {!this.state.isUploading && this.state.files2.length >= 2 && (
                <div className={styles.shw_item_i2}>
                  {this.state.files2.map((i, ix) => {return (<img src={i.url} alt="" className={styles.shw_item2} key={ix}/>);})}
                </div>
              )}

              <div className={styles.name5}>
                {this.state.isShowTime2 ? <span className={styles.name7}>{this.state.time2} &nbsp;&nbsp;&nbsp;&nbsp; 删除</span> :
                  <InputItem id='time2' onChange={(time2) => {this.setState({ time2 });}} value={this.state.time2} placeholder={'请输入时间'}/>}
                <div className={styles.dot0}>
                  <div className={styles.dot} />
                  <div className={styles.dot} />
                </div>
              </div>
            </div>
          </div>

          {!this.state.isShowShareText && <div className={styles.shw_item00}>
            <span>生成点赞个数 </span>
            <InputItem id='time2' onChange={(likeCount) => {this.setState({ likeCount });}} value={this.state.likeCount} placeholder={'请输入生成点赞个数'}/>
          </div>}

          {this.state.isUploading && (
            <div className={styles.shw_item0}>
              <Button  style={{ width: 130 }} type="primary" size="small" inline onClick={() => {
                this.setState({
                  isUploading: false,
                  isShowShareText:true,
                  isShowTime1:true,
                  isShowTime2:true,
                  arr: this.markRandom(this.state.likeCount, 470),
                });}}>
                确定生成页面
              </Button>
            </div>
          )}

          {/*下半部分*/}
          <div className={styles.bottom}>
            <div><img src={imgs.icon7} alt="" className={styles.love} /></div>
            <div className={styles.bottom1}>
              {this.state.arr.map((i, ix) => {return (<img key={ix} src={require(`../../heads/head_${i}.png`)} alt="" className={styles.bottomImg}/>);})}
            </div>
          </div>

          {/*评论部分*/}
          <div className={styles.say}>
            <div className={styles.say1}>评论</div>
            <img src={imgs.icon8} alt="" className={styles.say2} />
            <div className={styles.say3}>发送</div>
          </div>
        </div>
      </div>
    );
  }
}
